<template>
  <!-- 展示容器 -->
  <div id="product">
    <div class="productcontainer">
      <!-- 左侧标题图片 -->
      <div class="lefttitle">
        <img style="max-height: 168px;position: relative;top: 130px" :src="title" alt="">
      </div>
      <!-- 列表容器 -->
      <div class="container">
        <!-- 遍历数据数组，生成项 -->
        <div v-for="(item, index) in data" :key="index" class="productitem">
          <!-- 左侧 -->
          <div class="left" v-if="index % 2 === 0">
            <img :src="item.url" class="image" alt=""/>
            <div class="text-overlay" :style="{'--theme':color}">
              {{ item.title }}
            </div>
          </div>
          <!-- 右侧 -->
          <div class="right" v-if="index % 2 !== 0">
            <img :src="item.url" class="image" alt=""/>
            <div class="text-overlay" :style="{'--theme':color}">
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 传入的数据类型为数组
    data: {
      type: Array,
      required: true
    },
    // 标题图片的 URL
    title: {
      type: String,
      required: true
    },
    // 主题颜色
    color: {
      type: String,
      required: true
    }
  },
  data() {
    return {};
  },
  methods: {},
  mounted() {}
};
</script>

<style scoped>
/* 图片样式，最大宽度和高度 */
img {
  max-width: 420px;
  max-height: 310px;
}

/* 容器样式，使用 flex 布局 */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* 图片容器样式 */
.image-container {
  position: relative;
  margin-bottom: 20px;
}

/* 图片样式，宽度自适应 */
.image {
  max-width: 100%;
  height: auto;
}

/* 标题覆盖样式 */
.title-overlay {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background-color: rgba(187, 146, 68, 0.8);
  color: white;
  padding: 10px 20px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 5px;
}

/* 分类标题样式 */
.classification {
  position: relative;
  padding-top: 20px;
  margin: 1em 0 0 1em;
  color: #000000;
  font-weight: lighter;
}

/* 容器样式，使用 flex 布局 */
.productcontainer {
  display: flex;
  margin: 40px calc(6.5em + 2vw);
  max-width: 100%;
  overflow: hidden;
}

/* 左侧标题容器样式 */
.lefttitle {}

/* 右侧容器反向布局 */
.right {
  flex-direction: row-reverse;
}

/* 左右侧项样式 */
.left, .right {
  flex: 1;
  display: flex;
  margin: 20px;
}

/* 左侧文本覆盖样式 */
.left > .text-overlay {
  left: -40px;
}

/* 右侧文本覆盖样式 */
.right > .text-overlay {
  left: 40px;
}

/* 文本覆盖样式 */
.text-overlay {
  background-color: var(--theme, #71361D);
  color: white;
  font-size: 18px;
  font-weight: bold;
  border-radius: 5px;
  height: 100%;
  padding: 40px;
  text-align: center;
  position: relative;
  top: 30px;
}
</style>
